<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			backgroundColor: "#0A0F23",
		    color: ["#0f79ae", "#6bc2a5","#b1f86b"],
		    title: {
		        text: "科创成效",
		        top: "10%",
		        left: "center",
		        textStyle: {
		            color: "#FFF",
		            fontSize: 22
		        }
		    },
		    legend: {
		        data: ['经济', '人口','指数'],
		        left: 'center',
		        bottom:'8%',
		        textStyle: {
					color: '#fff',
					fontSize:16
				}
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    grid: {
		    	top:'20%',
		    	left:'5%',
		    	bottom:'15%',
		    	right:'5%',
		        containLabel: true
		    },
		    xAxis: [{
		        type: 'category',
		        data: ['北京', '西安', '杭州', '成都', '重庆'],
		        axisTick: {
		            alignWithLabel: true
		        },
		        axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 16
					}
				},
				splitLine: {
	                lineStyle: {
	                    type: 'dashed',
	                    color:'#0A0F23'
	                }
	            },
	            axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        }
		    }],
		    yAxis: [{
		        type: 'value',
		        splitLine: {
	                lineStyle: {
	                    type: 'dashed'
	                }
	            },
	            axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 16
					}
				},
	            axisLine: {
					lineStyle: {
						color: '#fff'
					}  
				}
		    }],
		    series: [{
		        name: '经济',
		        type: 'bar',
		        stack: '总量',
		        barWidth: '30%',
		        data: [56000000, 23000000, 43000000, 35000000, 40000000]
		    }, {
		        name: '人口',
		        type: 'bar',
		        stack: '总量',
		        barWidth: '30%',
		        data: [3400000, 2000000, 2800000, 2600000, 1700000]
		    }, {
		        name: '指数',
		        type: 'bar',
		        stack: '总量',
		        barWidth: '30%',
		        data: [1400000, 1000000, 1300000, 1100000, 1200000]
		    }]
		};
		
		myChart.setOption(option);
	</script>

</html>